<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>HServer-APM</title>
    <link
            rel="stylesheet"
            href="/css/mdui.min.css"
    />
    <script
            src="/js/mdui.min.js"
    ></script>
    <script src="/js/vue.js"></script>
    <script>var $ = mdui.$;</script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>



    <style>
        .mdui-card {
            margin: 10px;
        }
    </style>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar  mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
<header class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
          mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
        <a href="index.html" class="mdui-typo-headline mdui-hidden-xs">HServer-APM</a>
    </div>
</header>

<div class="mdui-drawer" id="main-drawer">
    <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
                <div class="mdui-list-item-content">
                    <a href="index.html">服务大盘</a>
                </div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
                <div class="mdui-list-item-content"><a href="request.html">请求记录</a></div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
                <div class="mdui-list-item-content"><a href="log.html">请求日志</a></div>
            </div>
        </div>
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
                <div class="mdui-list-item-content"><a href="config.html">APM配置</a></div>
            </div>
        </div>
    </div>
</div>
<div id="app">
    <div class="mdui-panel" mdui-panel>

        <div v-if="dataInfo==null||Object.keys(dataInfo).length===0" style="text-align: center;margin: 100px auto">
            暂时没得数据
        </div>
        <div v-else class="mdui-card" v-for="a in Object.keys(dataInfo)">
            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                    <tr>
                        <th>描述</th>
                        <th>结果</th>
                        <th>曲线图</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>服务名</td>
                        <td>{{a}}</td>
                        <td rowspan="7" :id="'table_'+a" style="width: 60vw;height: 70vh">
                        </td>
                    </tr>
                    <tr>
                        <td>当前请求量</td>
                        <td>{{dataInfo[a][dataInfo[a].length-1].requestSize}}</td>
                    </tr>
                    <tr>
                        <td>总请求</td>
                        <td>{{dataInfo[a][dataInfo[a].length-1].requestTotal}}次</td>
                    </tr>
                    <tr>
                        <td>线程数</td>
                        <td>{{dataInfo[a][dataInfo[a].length-1].threadNum}}</td>
                    </tr>
                    <tr>
                        <td>内存占用</td>
                        <td>
                            总共{{dataInfo[a][dataInfo[a].length-1].memoryTotal}}-剩余{{dataInfo[a][dataInfo[a].length-1].memoryFree}}=占用{{dataInfo[a][dataInfo[a].length-1].memoryTotal - dataInfo[a][dataInfo[a].length-1].memoryFree}}MB
                        </td>
                    </tr>
                    <tr>
                        <td>IP</td>
                        <td>{{dataInfo[a][dataInfo[a].length-1].ip}}</td>
                    </tr>
                    <tr>
                        <td>系统</td>
                        <td>{{dataInfo[a][dataInfo[a].length-1].systemName}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataInfo: null,
            message: 'Hello Vue!'
        },
        mounted: function () {
            const that=this;
            that.getServerInfo();
            setInterval(function () {
                that.getServerInfo();
            },10000)

        },
        methods: {
            getTime(n) {
                var D = new Date(n);
                var year = D.getFullYear();//四位数年份
                var month = D.getMonth() + 1;//月份(0-11),0为一月份
                month = month < 10 ? ('0' + month) : month;
                var day = D.getDate();//月的某一天(1-31)
                day = day < 10 ? ('0' + day) : day;
                var hours = D.getHours();//小时(0-23)
                hours = hours < 10 ? ('0' + hours) : hours;
                var minutes = D.getMinutes();//分钟(0-59)
                minutes = minutes < 10 ? ('0' + minutes) : minutes;
                // var now_time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
                var now_time = hours + ':' + minutes;
                return now_time;
            },

            loadTable(id, keyId) {
                const that=this;
                var dom = document.getElementById(id);
                var myChart = echarts.init(dom);
                var option;
                // prettier-ignore
                const data = this.dataInfo[keyId];
                const dateList = data.map(function (item) {
                    return that.getTime(item.time);
                });
                const qpsList = data.map(function (item) {
                    return item.requestSize;
                });
                const threadList = data.map(function (item) {
                    return item.threadNum;
                });
                const memoryList = data.map(function (item) {
                    return item.memoryTotal-item.memoryFree;
                });
                option = {
                    // Make gradient line here
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 1,
                            dimension: 0,
                            min: 0,
                            max: dateList.length - 1
                        }
                    ],
                    title: [
                        {
                            left: 'center',
                            text: '请求量'
                        },
                        {
                            top: '50%',
                            left: 'center',
                            text: '内存占用'
                        },
                    ],
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [
                        {
                            data: dateList
                        },
                        {
                            data: dateList,
                            gridIndex: 1
                        }
                    ],
                    yAxis: [
                        {},
                        {
                            gridIndex: 1
                        }
                    ],
                    grid: [
                        {
                            bottom: '60%'
                        },
                        {
                            top: '60%'
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            showSymbol: false,
                            data: qpsList,
                            name:"请求量",
                            stack: "/S",
                        },
                        {
                            type: 'line',
                            showSymbol: false,
                            data: memoryList,
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            stack: "/MB",
                            name:"内存占用"
                        },
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }

            },
            getServerInfo() {
                const that = this;
                $.ajax({
                    type: "GET",
                    url: "/api/serverInfo",
                    dataType: "json",
                    success: function (data) {
                        if (data.code === 200) {
                            that.dataInfo = data.data
                            that.$nextTick(function () {
                                for (let a of Object.keys(that.dataInfo)) {
                                    that.loadTable("table_" + a, a)
                                }
                            })
                        }
                    }
                });
            },
        }
    })
</script>